<template>
	<view class="mainPage " :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="box" v-if="yuyueInfo">
			<view class="box1">
				<view class="hospital-name">
					{{yuyueInfo.hospital_name}}  
				</view>
				
				<view class="xingming-box">
					<text class="">宠主姓名</text>
					<text class="name">{{yuyueInfo.nickname}}  </text>
				</view>
				<view class="jiuzhen-box">
					<text class="">就诊时间</text>
					<text class="time1">{{yuyueInfo.date.substring(0,4)}}-{{yuyueInfo.date.substring(4,6)}}-{{yuyueInfo.date.substring(6,8)}}</text> <text>{{yuyueInfo.type==0?'早上':yuyueInfo.type==1?'下午':'晚上'}}</text>
					<text class="time2"></text>
				</view>
				<view class="feiyong-box">
					<text class="">费用</text>
					<text class="price">{{yuyueInfo.price}}元</text>
				</view>

				<view class="pet-info">
					<view class="left">
						就诊宠物信息
					</view>
					<view class="right">
						<text v-if="yuyueInfo.varieties==1" style="margin-right:10rpx;">猫</text>
						<text v-else-if="yuyueInfo.varieties==2" style="margin-right:10rpx;">狗</text>
						<text v-else style="margin-right:10rpx;">其他</text>
 						<text v-if="yuyueInfo.sex==1" style="margin-right:10rpx;">公</text>
						<text v-else style="margin-right:10rpx;">母</text>  
						{{yuyueInfo.weight}}kg
					</view>
				</view>
				
				<view class="shoujihao">
					<view class="left">
						手机号
					</view>
					<view class="right">
						{{yuyueInfo.phone}}  
					</view>
				</view>
				
				<view class="dingdanhao">
					<view class="left">
						订单号
					</view>
					<view class="right">
						{{yuyueInfo.order_sn}}
					</view>
				</view>
										
			</view>
			
			
			<view class="box2" v-if="yuyueInfo.status==0">
				<view class="first-line">
					<view class="hexiaoma">
						核销码
					</view>
					<view class="input-box">
						<input v-model.trim="hexiaoma"  placeholder-style="font-size: 24rpx;color: #AAAAAA;" placeholder="请输入核销码" type="text" value="" />
						<image @click="erweima" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/saoyisao.png" mode=""></image>
					</view>
				</view>
				<view class="second-line">
					<text @click="hexiao">核销</text>
				</view>
			</view>
			
			<view class="box3" v-else>
				<view class="yihexiao-box">
					<view class="left">
						<text class="hexiaoma">核销码</text>
						<text class="haoma">{{yuyueInfo.code}}</text>
					</view>
					<view class="right">
						已核销
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '预约信息',
				hexiaoma:"",
				
				yuyueInfo:"",
				orderNum:"",   //订单号
			}
		},
		onLoad(options) {
			that=this
			that.orderNum=options.orderNum
			that.requestData(that.orderNum)
		},
		methods: {
			hexiao(){
				if(that.hexiaoma==""){
					uni.showToast({
						icon: 'none',
						// image: '../../static/shibai.png',
					    title: '请输入正确的核销码!',
					    duration: 2000
					});
					return
				}
				uni.showLoading({
					mask: true,
					title:"核销中"
				});
				that.$postAjax1('PetDoctor_order_collate',{  //https://ask.suoweilai.com/PetDoctor_order_collate  医生端-预约管理 - 预约管理-核算订单
					order_sn:that.hexiaoma,
				},function(data){
					that.requestData(that.orderNum)
				})
			},
			requestData(orderNum){
				uni.showLoading({
					mask: true
				});
				that.$postAjax1('PetDoctor_Reservation_interface',{  //https://ask.suoweilai.com/PetDoctor_Reservation_interface 医生端-预约管理 - 预约管理-核算界面
					order_sn:orderNum,   //订单号
				},function(data){
					uni.hideLoading();
					that.yuyueInfo=data.data.data
				})
			},
			
			erweima(){
				console.log(111111)
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.hexiaoma =res.result
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.box{
	padding-top: 20rpx;
	.box1{
		background-color: #FFFFFF;
		padding:  0 32rpx;
		margin-bottom: 20rpx;
		.hospital-name{
			font-size: 32rpx;
			font-weight: 600;
			color: #242424;
			line-height: 44rpx;
			padding: 18rpx 0 32rpx;
		}
		.xingming-box{
			margin-bottom: 28rpx;
			text{
				font-size: 28rpx;
				font-weight: 400;
				color: #242424;
				line-height: 40rpx;
				vertical-align: middle;
			}
			.name{
				margin-left: 34rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #242424;
				line-height: 40rpx;
			}
		}
		.jiuzhen-box{
			margin-bottom: 28rpx;
			text{
				font-size: 28rpx;
				font-weight: 400;
				color: #242424;
				line-height: 40rpx;
				vertical-align: middle;
			}
			.time1{
				margin-left: 34rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #242424;
				line-height: 40rpx;
			}
			.time2{
				margin-left: 18rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #242424;
				line-height: 40rpx;
			}
		}
		.feiyong-box{
			margin-bottom: 28rpx;
			text{
				font-size: 28rpx;
				font-weight: 400;
				color: #242424;
				line-height: 40rpx;
				vertical-align: middle;
			}
			.price{
				margin-left: 92rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #242424;
				line-height: 40rpx;
			}
		}
		
		.pet-info,.shoujihao,.dingdanhao{
			border-top: 2rpx solid rgba(0,0,0,0.08);
			padding:  28rpx 46rpx 28rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				font-size: 28rpx;
				font-weight: 400;
				color: #242424;
				line-height: 40rpx;
			}
			.right{
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #242424;
				line-height: 40rpx;
			}
		}
		
	}
	.box2{
		background-color: #FFFFFF;
		padding: 46rpx 78rpx 26rpx;
		.first-line{
			margin-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.hexiaoma{
				font-size: 30rpx;
				font-weight: 500;
			}
			.input-box{
				position: relative;
				input{
					width: 400rpx;
					border-radius: 8rpx;
					border: 2rpx solid #EAEAEA;
					// box-sizing: border-box;
					padding: 16rpx 50rpx 16rpx 28rpx;
					font-size: 24rpx;
					line-height: 40rpx;
				}
				image{
					display: inline-block;
					position: absolute;
					top: 18rpx;
					right: 20rpx;
					width: 38rpx;
					height: 34rpx;
				}
			}
		}
		
		.second-line{
			text-align: right;
			text{
				display: inline-block;
				background: linear-gradient(220deg, #F78361 0%, #F54B64 100%);
				border-radius: 4rpx;
				padding: 8rpx 36rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}
	}
	.box3{
		background-color: #FFFFFF;
		padding: 38rpx 78rpx ;
		.yihexiao-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				.hexiaoma{
					font-size: 30rpx;
					margin-right: 12rpx;
					font-weight: 500;
				}
				.haoma{
					font-size: 26rpx;
					font-weight: 400;
					color: #AAAAAA;
					line-height: 36rpx;
					text-decoration:line-through; 
				}
			}
			.right{
				font-size: 24rpx;
				font-weight: 400;
				color: #AAAAAA;
				line-height: 34rpx;
			}
		}
	}
}
</style>
